<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>账号管理</BreadcrumbItem>
      <BreadcrumbItem>新增账号</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" inline>
      <FormItem>
        <Button type="default" @click="$router.go('-1')">返回</Button>
      </FormItem>
    </Form>
    <div class="form_box">
      <Form ref="formCustom" style="width: 850px;" :model="form" :label-width="100">
        <FormItem label="email">
          <Input type="email" v-model="form.email" style="width:500px;" placeholder="请输入邮箱"></Input>
        </FormItem>
        <FormItem label="用户名">
          <Input type="text" v-model="form.username" style="width:500px;" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem label="用户密码">
          <Input type="password" password v-model="form.password" style="width:500px;"
                 placeholder="请输入用户密码"></Input>
        </FormItem>
        <h3 style="width: 100px;text-align: right;margin-bottom: 24px;">权限设置</h3>

        <FormItem label="角色:">
          <RadioGroup v-model="selectData" vertical @on-change="changeSelect">
            <Radio :label="item.id" v-for="item in list" :key="item.ROW_NUMBER">
              {{ item.title }}
            </Radio>
          </RadioGroup>
        </FormItem>

        <FormItem label="选择经理" v-if="my_role_id !==6 && role_id === 7">
          <Select placeholder="请选择" style="width: 120px;" v-model="form.manager_id">
            <Option :value="item.id" v-for="(item,index) in accountList" :key="index">{{ item.username }}</Option>
          </Select>
        </FormItem>
        <FormItem label="权限预览" v-if="selectData!==''">
          <CheckboxGroup v-model="list_">
            <div v-for="(item , index) in data" :key="index" class="outer">
              <div class="checkboxs">
                <Checkbox :label="item.id" disabled border>{{ item.title }}</Checkbox>
              </div>
              <div v-if="item.child.length !== 0" class="subordinate">
                <div v-for="(item , index) in item.child" :key="index">
                  <Checkbox class="checkbox" disabled :label="item.id" border>{{ item.title }}</Checkbox>
                  <Checkbox v-for="(i , idx) in item.children" disabled :key="idx" :label="i.id" class="check"
                            border>{{ i.title }}
                  </Checkbox>
                </div>
              </div>
            </div>
          </CheckboxGroup>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="Submit">确定</Button>&nbsp;&nbsp;&nbsp;&nbsp;
          <Button type="default" @click="$router.go('-1')">取消</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        role_id: null,
        manager_id: null,//经理id 经理角色账号时 不填
        email: '',//邮箱
      },
      selectData: [], // 权限组选中下标
      selectList: [], //权限预览id
      show: true,

      list_: [],

      list: [{
        'ROW_NUMBER': '1',
        'create_time': '2021-11-12 12:22:33.000',
        'id': '18',
        'remarks': 'a',
        'status': '1',
        'title': 'a'
      }
      ],
      roleList: [],

      checkAll: true,
      role_id: null,
      data: [{
        "id": "1",
        "pid": "0",
        "title": "角色控制",
        "child": [{"id": "2", "pid": "1", "title": "增"}, {"id": "3", "pid": "1", "title": "改"}, {
          "id": "4",
          "pid": "1",
          "title": "删"
        }, {"id": "33", "pid": "1", "title": "权限管理"}]
      }, {
        "id": "8",
        "pid": "0",
        "title": "账号管理",
        "child": [{"id": "9", "pid": "8", "title": "增"}, {"id": "10", "pid": "8", "title": "改"}, {
          "id": "11",
          "pid": "8",
          "title": "删"
        }, {"id": "34", "pid": "8", "title": "设置角色"}]
      }, {
        "id": "14",
        "pid": "0",
        "title": "机器组管理",
        "child": [{"id": "15", "pid": "14", "title": "增"}, {"id": "16", "pid": "14", "title": "删"}, {
          "id": "17",
          "pid": "14",
          "title": "改"
        }]
      }, {
        "id": "19",
        "pid": "0",
        "title": "操作员管理",
        "child": [{"id": "20", "pid": "19", "title": "增"}, {"id": "21", "pid": "19", "title": "删"}, {
          "id": "22",
          "pid": "19",
          "title": "改"
        }]
      }, {
        "id": "24",
        "pid": "0",
        "title": "机器管理",
        "child": [{"id": "25", "pid": "24", "title": "增"}, {"id": "26", "pid": "24", "title": "删"}, {
          "id": "27",
          "pid": "24",
          "title": "改"
        }]
      }, {
        "id": "29",
        "pid": "0",
        "title": "权限设置",
        "child": [{"id": "30", "pid": "29", "title": "增"}, {"id": "31", "pid": "29", "title": "删"}, {
          "id": "32",
          "pid": "29",
          "title": "改"
        }]
      }, {"id": "36", "pid": "0", "title": "普通订单", "child": [{"id": "37", "pid": "36", "title": "查看"}]}, {
        "id": "38",
        "pid": "0",
        "title": "异常订单",
        "child": [{"id": "39", "pid": "38", "title": "审核"}]
      }, {
        "id": "40",
        "pid": "0",
        "title": "统计表下载",
        "child": [{"id": "41", "pid": "40", "title": "加入任务列表"}, {"id": "42", "pid": "40", "title": "全部下载"}, {
          "id": "43",
          "pid": "40",
          "title": "下载"
        }, {"id": "44", "pid": "40", "title": "删除"}]
      }, {
        "id": "45",
        "pid": "0",
        "title": "商品管理",
        "child": [{"id": "46", "pid": "45", "title": "商品导出"}, {"id": "47", "pid": "45", "title": "刷新"}, {
          "id": "48",
          "pid": "45",
          "title": "设置单独门店价格"
        }, {"id": "49", "pid": "45", "title": "门店单独价格修改"}, {"id": "50", "pid": "45", "title": "门店统一价格修改"}, {
          "id": "51",
          "pid": "45",
          "title": "商品查看"
        }, {"id": "58", "pid": "45", "title": "刷新门店商品库"}]
      }, {
        "id": "52",
        "pid": "0",
        "title": "门店管理",
        "child": [{"id": "53", "pid": "52", "title": "门店导出"}, {"id": "54", "pid": "52", "title": "添加门店"}, {
          "id": "55",
          "pid": "52",
          "title": "查看设备"
        }, {"id": "56", "pid": "52", "title": "设备管理"}, {"id": "57", "pid": "52", "title": "门店修改"}]
      }, {
        "id": "59",
        "pid": "0",
        "title": "库存管理",
        "child": [{"id": "60", "pid": "59", "title": "库存导出"}, {"id": "61", "pid": "59", "title": "阈值设置"}, {
          "id": "62",
          "pid": "59",
          "title": "库存详情"
        }, {"id": "63", "pid": "59", "title": "库存商品导出"}, {"id": "64", "pid": "59", "title": "设置标准库存"}]
      }, {
        "id": "65",
        "pid": "0",
        "title": "上下货查询",
        "child": [{"id": "66", "pid": "65", "title": "上下货导出"}, {
          "id": "67",
          "pid": "65",
          "title": "查看上货详情"
        }, {"id": "68", "pid": "65", "title": "上下货详情导出"}]
      }],
      accountList: [],


      my_role_id: null, //6经理
    };
  },
  created() {
    // this.m_id = JSON.parse(this.astgo.getItem(this.Pn + 'info")).role_id

    this.my_role_id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;
    console.log(this.my_role_id)

  },
  methods: {
    getAccount() { //获取所有经理
      this.axios.post("device/getAccount").then(res => {
        if (res.code === 1) {
          this.accountList = res.data;
        }
      });
    },
    all() {
      this.axios.post("role/rule_list").then(res => {
        if (res.code === 1) {
          this.data = res.data;
        }
      });
    },

    Submit() {
      var form = this.form;
      form.role_id = this.role_id
      console.log(form)
      this.axios.post('account/addAccount', form).then(res => {
        if (res.code === 1) {
          this.$Message.success('添加成功');
          this.$router.go(-1)
        }
      })

    },

    getlist() {

      //如果是经理只能添加操作员

      this.axios.post("role/role_list", {status: 1}).then(res => {
        if (res.code === 1) {
          if (this.my_role_id === 6) {
            this.role_id = 7;
            this.list = [];

            var arr = res.data.list;

            for (var i = 0, len = arr.length; i < len; i++) {
              if (arr[i].id === 7) {
                this.list.push(arr[i]);
                break
              }
            }
          } else {
            this.list = res.data.list;
            this.role_id = this.list[0].id;
            console.log(this.selectData)

          }

          this.selectData = this.list[0].id;


          this.getRole();
        }
      });
    },

    getRole() {
      this.axios.post("role/get_role_rule", {role_id: this.role_id}).then(res => {
        if (res.code === 1) {
          this.list_ = res.data;
          console.log(this.list_)
        }
      })
    },
    changeSelect(e) {
      console.log('选择', e)
      this.show = false;
      this.$nextTick(() => {
        this.show = true
      })
      this.role_id = e;
      // this.getRole();
    },


  }

};
</script>

<style scoped>
h3 {
  line-height: 50px;
}

.subordinate {
  margin: 10px 20px;
}

.checkbox {
  margin: 5px 10px;
  min-width: 200px;
}

.check {
  margin-top: 5px;
  margin-left: 30px;
  min-width: 160px;
}

.checkboxs {
  border-bottom: 1px solid silver;
  padding-bottom: 10px;
}

.outer {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid silver;
  border-radius: 5px;
}
</style>
